<%--
  学生信息的主页面
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
    String path = request.getContextPath();
%>
<html>
<head>
    <title>学生信息界面</title>
</head>
<body>
<jsp:include page="../common/css_js.jsp"/>
<%--主页面--%>
    <div class="page-container">
        <div class="mt-3 mb-3">
            <h3>学生的基本信息</h3>
            <%--<a class="btn btn-success" href="javascript:;" onclick="selcetById()">根据学生学号查询学生</a>
            <a class="btn btn-success" href="javascript:;" onclick="selcetByName()">根据学生姓名查询学生</a>
            <a class="btn btn-success" href="javascript:;" onclick="selcetByDorm()">根据寝室查询学生</a>--%>
        </div>
        <table class="table" id="myTable">
            <thead>
            <tr>
                <td>序号</td>
                <td>学生学号</td>
                <td>学生姓名</td>
                <td>学生性别</td>
                <td>居住地</td>
                <td>学生电话</td>
                <td>楼号</td>
                <td>寝室号</td>
                <td>操作</td>
            </tr>
            </thead>
            <tbody>
            <c:forEach items="${studentList.list}" var="one" varStatus="sta">
                <tr id="b_${one.stuId}">
                    <td>#.${sta.index+1}</td>
                    <td class="stuId">${one.stuId}</td>
                    <td class="stuName">${one.stuName}</td>
                    <td class="stuSex">${one.stuSex}</td>
                    <td class="stuAddress">${one.stuAddress}</td>
                    <td class="stuTel">${one.stuTel}</td>
                    <td class="buildId">${one.buildId}</td>
                    <td class="dorId">${one.dorId}</td>
                    <td>
                        <a class="btn btn-success btn-sm" href="javascript:;" onclick="update(${one.stuId})">修改</a>
                        <a class="btn btn-danger btn-sm" href="javascript:;" onclick="del(${one.stuId})">删除</a>
                    </td>
                </tr>
            </c:forEach>
            </tbody>
        </table>
        <div class="mt-3 mb-3">
            <a class="btn btn-success" href="javascript:;" onclick="add()">添加</a>
        </div>
        <%--分页显示--%>
        <div>
            <button type="button" class="btn btn-success btn-sm" onclick="firstPage()">首页</button>
            <button type="button" class="btn btn-success btn-sm" onclick="previousPage()">上一页</button>
            <button type="button" class="btn btn-success btn-sm" onclick="nextPage()">下一页</button>
            <button type="button" class="btn btn-success btn-sm" onclick="lastPage()">尾页</button>
            <span>当前第${studentList.currentPage}页,共${studentList.totalPage}页，共${studentList.totalSize}条数据</span>
        </div>
    </div>


<%--学生添加用模态框--%>
<div class="modal fade" id="addModal">
    <div class="modal-dialog">
        <div class="modal-content">

            <div class="modal-header">
                <h3 class="mt-3 mb-3">添加学生信息</h3>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>

            <div class="modal-body">
                <form onsubmit="return false;">
                    <div class="form-group">
                        <label>学生学号</label>
                        <input type="text" id="id" name="id" class="form-control">
                    </div>
                    <div class="form-group">
                        <label>学生姓名</label>
                        <input type="text" id="name" name="name" class="form-control">
                    </div >
                    <div class="form-group">
                        <label>学生性别</label>
                        <input type="text" id="sex" name="sex" class="form-control">
                    </div>
                    <div class="form-group">
                        <label>学生居住地</label>
                        <input type="text" id="address" name="address" class="form-control">
                    </div>
                    <div class="form-group">
                        <label>学生电话</label>
                        <input type="text" id="tel" name="tel" class="form-control">
                    </div>
                    <div class="form-group">
                        <label>学生栋数</label>
                        <input type="text" id="buildId" name="buildId" class="form-control">
                    </div>
                    <div class="form-group">
                        <label>学生寝室号</label>
                        <input type="text" id="dorId" name="dorId" class="form-control">
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" onclick="add_do()">提交</button>
            </div>
        </div>
    </div>
</div>


<%--学生信息修改--%>
<div class="modal fade" id="updateModal">
    <div class="modal-dialog">
        <div class="modal-content">

            <div class="modal-header">
                <h5 class="modal-title">修改学生信息</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>

            <div class="modal-body">
                <form onsubmit="return false;" >
                    <div class="form-group">
                        <label>学生ID</label>
                        <input type="text" id="stuId" name="id"  class="form-control" readonly="true">
                    </div>
                    <div class="form-group">
                        <label>学生姓名</label>
                        <input type="text" id="stuName" name="name"  class="form-control">
                    </div>
                    <div class="form-group">
                        <label>学生性别</label>
                        <input type="text" id="stuSex" name="sex"  class="form-control">
                    </div>
                    <div class="form-group">
                        <label>学生居住地</label>
                        <input type="text" id="stuAddress" name="address"  class="form-control">
                    </div>
                    <div class="form-group">
                        <label>学生电话</label>
                        <input type="text" id="stuTel"  name="tel"  class="form-control">
                    </div>
                    <div class="form-group">
                        <label>学生栋数</label>
                        <input type="text" id="StuBuildId" name="buildId"  class="form-control">
                    </div>
                    <div class="form-group">
                        <label>学生寝室号</label>
                        <input type="text" id="stuDorId" name="dorId"  class="form-control">
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" onclick="update_do()">提交</button>
            </div>
        </div>
    </div>
</div>

<%--学生添加用的js--%>
<script>
    function add(id) {
        $("#addModal").modal("show");//弹模态框
    }

    function add_do() {
            var id=$("#id").val();
            var name=$("#name").val();
            var sex=$("#sex").val();
            var address=$("#address").val();
            var tel=$("#tel").val();
            var buildId=$("#buildId").val();
            var dorId=$("#dorId").val();

            var student = {
                "stuId":id,
                "stuName":name,
                "stuSex":sex,
                "stuAddress":address,
                "stuTel":tel,
                "buildId":buildId,
                "dorId":dorId
            }
            $.ajax({
                url: "${pageContext.request.contextPath}/student/add",
                contentType: "application/json;charset=utf-8",
                dataType: "json",
                type: "post",
                data:JSON.stringify(student),
                success: function () {
                    alert("添加成功")
                    location.reload();
                },
                error:function () {
                    alert("添加失败")
                }
            })
        }

<%--修改用的js--%>

    function update(id) {
        $("#updateModal").modal("show");
        $("#stuId").val($("#b_" + id + " .stuId").text());
        $("#stuName").val($("#b_" + id + " .stuName").text());
        $("#stuSex").val($("#b_" + id + " .stuSex").text());
        $("#stuAddress").val($("#b_" + id + " .stuAddress").text());
        $("#stuTel").val($("#b_" + id + " .stuTel").text());
        $("#StuBuildId").val($("#b_" + id + " .buildId").text());
        $("#stuDorId").val($("#b_" + id + " .dorId").text());

    }

    function update_do() {
            var id=$("#stuId").val();
            var name=$("#stuName").val();
            var sex=$("#stuSex").val();
            var address=$("#stuAddress").val();
            var tel=$("#stuTel").val();
            var buildId=$("#StuBuildId").val();
            var dorId=$("#stuDorId").val();

            var student = {
                "stuId":id,
                "stuName":name,
                "stuSex":sex,
                "stuAddress":address,
                "stuTel":tel,
                "buildId":buildId,
                "dorId":dorId
            }
            $.ajax({
                url: "${pageContext.request.contextPath}/student/edit",
                contentType: "application/json;charset=utf-8",
                dataType: "json",
                type: "post",
                data:JSON.stringify(student),
                success: function () {
                    alert("修改成功")
                    location.reload();
                },
                error:function () {
                    alert("修改失败")
                }
            })
        }

    //删除跳转
    function del(id) {
        if(confirm("你真的要删除吗？")){
            location.href = "delete?id=" + id;
            if (confirm("删除成功")){
                location.reload();
            }
        }
    }
</script>

<script>

</script>

<%--分页显示功能--%>
<script>
    var pageNumber=${studentList.currentPage};
    var pageSize = ${studentList.pageSize};
    var totalPage = ${studentList.totalPage};

    function goto() {
        window.location.href =
            "${pageContext.request.contextPath}/student/list?pageNumber="+pageNumber+"&pageSize="+pageSize;
    }
    //首页
    function firstPage(){
        if(pageNumber > 1){
            pageNumber = 1;
            //跳转页面
            goto();
        }
    }
    //上一页
    function previousPage() {
        if(pageNumber > 1){
            pageNumber--;
            goto();
        }
    }
    //下一页
    function nextPage() {
        if(pageNumber < totalPage){
            pageNumber++;
            goto()
        }
    }
    //尾页
    function lastPage() {
        if(pageNumber < totalPage){
            pageNumber = totalPage;
            goto();
        }
    }
</script>

<link href="${pageContext.request.contextPath}/static/jquery/jquery.dataTables.min.css" rel="stylesheet">
<script src="${pageContext.request.contextPath}/static/jquery/jquery.dataTables.min.js"></script>
<script>
    function change() {
        $('#myTable').DataTable();
    }
</script>
</body>
</html>
